<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->

<template>
  <div>
    <span v-if="!editable" style="padding: 8px 0px 8px 8px">{{customerName}}</span>
    <el-autocomplete
      popper-class="my-autocomplete"
      v-model="customerName"
      :fetch-suggestions="querySearch"
      @blur="changeVal"
      size="small"
      v-if="editable"
      :popper-append-to-body="false"
      style="width: 100%"
      @select="handleSelect">
      <template slot-scope="{ item }">
        <div class="name">{{ item.customerName }}</div>
        <span class="addr">{{ item.identityNo }}</span>
      </template>
    </el-autocomplete>
  </div>
</template>

<script>
  export default {
    name: "FtCustomer",
    props: {
      value: {
        type: String
      },
      editable: {
        type: Boolean,
        default: true
      },
      customerType: {
        type: String
      },
      customerId: {
        type: String
      },
      customCondition: {
        type: String
      }
    },
    mounted() {
      this.load()
    },
    data() {
      return {
        customer: {},
        customerbak: {},
        customerArr: [],
        customerName: '',
        data: [],
        dataInit: [],
      }
    },
    methods: {
      load() {
        let params = {}
        if (this.customerType && '' != this.customerType) {
          this.$set(params, 'customerType', this.customerType)
        }
        if (this.customCondition && '' != this.customCondition) {
          this.$set(params, 'customCondition', this.customCondition)
        }
        this.$http.get('/joys-rest/lss-customer/custInfo/base', {
          params,
          emulateJSON: true
        }).then(resp => {
          this.data = resp.body
          if (this.customerId && this.customerId != '') {
            this.matchCustomerInit(this, this.customerId)
          }
        }, resp => {
          this.$message.error(resp.body.message)
        })
      },
      querySearch(queryString, cb) {
        var restaurants = this.data
        var results = []
        if ('' == queryString) {
          cb(results)
        } else {
          results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants

          // 调用 callback 返回建议列表的数据
          cb(results)
        }
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.customerName.toLowerCase().indexOf(queryString.toLowerCase()) != -1)
        }
      },
      change() {
        this.$emit('input', this.customerName)
        this.$emit('change', this.customerName)
      },
      handleSelect(item) {
        this.customerName = item.customerName
        this.$emit('matchedOption', item)
      },
      changeVal() {
        this.$nextTick(() => {
          this.matchCustomer(this, this.customerName)
        })
      },
      matchCustomer(_this, val) {
        _this.customerArr = _this.data.filter(item => {
          return item.customerName == val
        })
        if (_this.customerArr.length == 1) {
          _this.$emit('matchedOption', this.customerArr[0])
        } else {
          _this.$emit('unmatchedOption', {customerName: _this.customerName})
        }
      },
      matchCustomerInit(_this, val) {
        _this.customerArr = _this.data.filter(item => {
          return item.customerId == val
        })
        if (_this.customerArr.length == 1) {
          _this.customerName = _this.customerArr[0].customerName
          _this.$emit('matchedOption', this.customerArr[0])
        } else {
          _this.$emit('unmatchedOption', {customerName: _this.customerName})
        }
      },
    },
    watch: {
      customerId: {
        handler(val) {
          const _this = this
          _this.load()
        },
        immediate: true
      },
    }
  }
</script>
<style>
  .my-autocomplete.el-autocomplete-suggestion li {
    line-height: normal;
    padding: 7px;
  }

  .my-autocomplete.el-autocomplete-suggestion .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .my-autocomplete.el-autocomplete-suggestion .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .my-autocomplete.el-autocomplete-suggestion.highlighted .addr {
    color: #ddd;
  }

</style>
<style scoped>

</style>


